<template>
  <div class="app-container">
    <div class="h4">
      行为事件
      <span>
        (独立IP访问量/总访问量)
      </span>
    </div>

    <el-row :gutter="20">
      <template v-for="item in topEvent">
        <el-col
          :sm="12"
          :md="4"
          class="mb-4"
          :key="item.event"
          v-if="item.event === 0 || item.event === 76||item.event === 4 || item.event === 61"
        >
          <div class="grid-content bg-purple card-small">
            <div class="d-flex card-body">
              <div class="m-auto d-flex flex-column ">
                <span class="stats-small__label  text-center">{{item.eventName}}</span>
                <h6 class="stats-small__value text-center">{{item.ipCount}}/{{item.allCount}}</h6>
              </div>
            </div>
          </div>
        </el-col>
      </template>
    </el-row>

    <div class="h4">
      行为趋势
    </div>
    <div class="chart-btn">
      <el-button @click="getAnalyzeDetail('首页',0)">首页</el-button>
      <el-button @click="getAnalyzeDetail('检测',76)">检测</el-button>
      <el-button @click="getAnalyzeDetail('日历',1)">日历</el-button>
      <el-button @click="getAnalyzeDetail('统计',3)">统计</el-button>
      <el-button @click="getAnalyzeDetail('曲线',2)">曲线</el-button>
      <el-button @click="getAnalyzeDetail('蜜豆中心',81)">蜜豆中心</el-button>
      <el-button @click="getAnalyzeDetail('好孕接力',77)">好孕接力</el-button>
    </div>

    <easyChart
      :id="'analyze'"
      :data='analyzeChartOption'
    ></easyChart>
  </div>
</template>
<script>
import { fetchAnalyzeData, fetchAnalyzeDetail } from "@/api/chart";
import format from "date-format";
import easyChart from "@/components/EasyChart";
import { formatDateTime, formatDate } from "@/utils/common";
export default {
  data() {
    return {
      topEvent: [],
      analyzeChartData: [],
      analyzeChartOption: {}
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getAnalyzeData();
      this.getAnalyzeDetail();
    },
    async getAnalyzeData() {
      const res = await fetchAnalyzeData();
      this.topEvent = [];
      res.data.forEach(item => {
        const data = {};
        data.event = item.event;
        data.eventName = item.eventName;
        data.ipCount = item.ipCount;
        data.allCount = item.allCount;
        this.topEvent.push(data);
      });
    },
    async getAnalyzeDetail(eventName, eventId) {
      const nomalValue = eventId || 1;
      const nomalName = eventName || "首页";
      const colors = ["#5793f3", "#675bba", "#d14a61"];
      const res = await fetchAnalyzeDetail({
        eventValue: nomalValue
      });
      this.analyzeChartData = res.data.map(item => {
        return [formatDate(item.time), item.ipCount, item.allCount];
      });

      this.analyzeChartOption = {
        color: colors,
        title: {
          text: nomalName + "访问量"
        },
        grid: {
          bottom: "25%"
        },
        dataZoom: [
          {
            show: true,
            bottom: "10%"
          },
          {
            type: "inside"
          }
        ],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["独立IP访问量", "总访问量"]
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          splitLine: { show: false }
        },
        yAxis: [
          {
            name: "次",
            type: "value",
            splitLine: { show: false },
            max: function(value) {
              return Math.ceil(value.max + value.max * 0.2);
            }
          }
        ],
        series: [
          {
            name: "独立IP访问量",
            type: "bar",
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#535a6d"
              }
            },
            itemStyle: {
              normal: {
                color: "#e49ea5"
              }
            },
            encode: {
              x: 0,
              y: 1
            },
            data: this.analyzeChartData
          },
          {
            name: "总访问量",
            type: "bar",
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#535a6d"
              }
            },
            itemStyle: {
              normal: {
                color: "#818181"
              }
            },
            encode: {
              x: 0,
              y: 2
            },
            data: this.analyzeChartData
          }
        ]
      };
    }
  },
  components: {
    easyChart
  }
};
</script>
<style lang="scss" scoped>
.chart-btn {
  margin-bottom: 40px;
}
</style>
